<template>
	<view class="m-gift-pop" id="popAll" :style="{pointerEvents:show?'fill':'none'}" @click="handlePopClick">
		<view class="pop-content flex-column-start-center"
			:style="{height:popHeigh+'rpx',bottom:show?'0rpx':-popHeigh-70+'rpx'}">
			<!-- slot部分 -->
			<view class="top-heart-up flex-row-center-center">
				<view class="top-heat-up-content flex-row-start-center">
					<view class="left-heart-icon ">
						<image class="cover-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c49ae88f2c0340bebc08d0690b1115b4.png"
							mode="aspectFill"></image>
						<view class="heart-text flex-row-center-center">19</view>
					</view>
					<view class="progress-content flex-column-center-center">
						<view class="progress-text progress-up-text">300/500</view>
						<view class="progress-box">
							<view class="progress-inner"></view>
						</view>
						<!-- <view class="progress-up-text">心动等级提升一级</view> -->
					</view>
				</view>

			</view>
			<view class="bottom-gifts-scroll flex-column-start-center">
				<scroll-view ref="scrollView" :scroll-y="true" class="gifts-content-y" :show-scrollbar="false"
					:scroll-with-animation="true">
					<view class="gift-list flex-row-start-start">
						<view class="gift-item "
							:class="{'empty-gift-item':item.isEmpty,'active-gift-item':index==actGiftIndex}"
							v-for="(item,index) in giftList" :key="index">
							<view class="gift-item-content flex-column-start-center"
								@click="handleGiftItemClick(item,index)">
								<view class="gift-img flex-row-center-center" v-if="item.image">
									<image class="cover-img" :src="item.image" mode="aspectFill"></image>
									<view class="gift-num">{{item.num}}</view>
								</view>
								<view class="gift-name" v-if="item.name">{{item.name}}</view>
								<view class="gift-tip" v-if="item.tipText">{{item.tipText}}</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottom-btn-box flex-row-between-center">
				<view class="left-tip flex-row-start-center">去获取

					<image class="left-tip-icon"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76c7818c369c4657a28845d1f047c8ee.png"
						mode="aspectFill"></image>
				</view>
				<view class="right-send flex-row-center-center">赠 送</view>
			</view>

		</view>






	</view>
</template>

<script>
	export default {
		props: {
			popHeigh: {
				type: [Number, String],
				default: 640
			},
		},
		data() {
			return {
				actGiftIndex: 0,
				show: false,
				emptyList: [{
						isEmpty: true,
					},
					{
						isEmpty: true,
					},
					{
						isEmpty: true,
					},
					{
						isEmpty: true,
					},
				],
				giftList: [{
						name: "高射炮",
						num: 10,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/909b88b48f344d929066c0bf04ac387d.png",
						tipText: "好感度+60",
					},
					{
						name: "我爱你",
						num: 18,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b21b60c3368d44ebbeee9186d69dfdb2.png",
						tipText: "好感度+60",
					},
					{
						name: "爱情鸟",
						num: 20,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c4b29ea6a1e646bca3dad1e010d0de76.png",
						tipText: "好感度+60",
					},
					{
						name: "加你卫星",
						num: 22,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8cc0604091674ca48547a2ec64e3ad7c.png",
						tipText: "好感度+60",
					},
					{
						name: "幸福拖拉机",
						num: 30,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a2c498897e474e05aa213c1ebfff84d2.png",
						tipText: "好感度+60",
					},
					{
						name: "浪漫约会",
						num: 15,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b69d8504712845369ccef22396c913d7.png",
						tipText: "好感度+60",
					},
					{
						name: "超级跑车",
						num: 19,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5bf93b66f7984524929e4fe75b75f33a.png",
						tipText: "好感度+60",
					},
					{
						name: "荧光棒",
						num: 30,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a6e26c876aad477a846989c7f9112e32.png",
						tipText: "好感度+60",
					},
					{
						name: "小螺号",
						num: 33,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6e213b5bbf954372b90d8ea0470fa9cd.png",
						tipText: "好感度+60",
					},
					{
						name: "豪华游艇",
						num: 20,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a480114be8b847cb9e2ee516dae2f357.png",
						tipText: "好感度+60",
					},
					{
						name: "烤肠玫瑰",
						num: 17,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acd2c4a1658046b192566a59dcb5d56b.png",
						tipText: "好感度+60",
					},
					{
						name: "私人飞机",
						num: 26,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0b83b3124e114df8932e05d05a03a02f.png",
						tipText: "好感度+60",
					},
					{
						name: "酷炫机车",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/80b79c6575d64bf283921132aadd327e.png",
						tipText: "好感度+60",
					},
				]
			}
		},
		created() {
			// this.giftList = this.giftList.concat(this.emptyList)
		},
		methods: {
			handleGiftItemClick(item, index) {
				this.actGiftIndex = index
			},
			handlePopClick(e) {
				if (e.target.id == "popAll") {
					this.show = false
					this.$emit("close")
				}
			},
			open() {
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-gift-pop {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 999999999999;
		pointer-events: fill;
		overflow: hidden;

		.intro-masker {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			// background-color: rgba(0, 0, 0, .5);
			z-index: 99999;
		}

		.pop-content {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100vw;
			box-sizing: border-box;
			background-color: transparent;
			transition: bottom 0.3s;
			pointer-events: fill;
			box-sizing: border-box;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			background-color: rgba(255, 255, 255, .9);
			backdrop-filter: blur(15rpx);
			z-index: 999;




			.top-heart-up {
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.top-heat-up-content {
					width: 700rpx;
				}

				.left-heart-icon {
					position: relative;
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;

					.heart-text {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 100%;
						z-index: 9;
						font-size: 26rpx;
						line-height: 26rpx;
						text-align: center;
						color: #fff;
					}
				}

				.progress-content {
					flex: 1;
					height: 100%;

					.progress-box {
						position: relative;
						width: 100%;
						height: 15rpx;
						background-color: rgba(0, 0, 0, .1);
						border-radius: 10rpx;
						box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, .8);

						.progress-inner {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 50%;
							height: 100%;
							background-image: linear-gradient(to right, rgba(253, 59, 87, 1)0%, rgba(253, 204, 170, 1)100%);
							border-radius: 10rpx;
							z-index: 2;
						}
					}


					.progress-up-text {
						width: 100%;
						font-size: 20rpx;
						line-height: 20rpx;
						text-align: right;
						color: #000;
						margin-bottom: 10rpx;
					}

					.progress-text {
						margin-bottom: 10rpx;
					}

					.progress-up-text {
						margin-top: 10rpx;
					}



				}
			}

			.bottom-gifts-scroll {
				height: 400rpx;
				width: 100%;
				overflow: hidden;
				margin-top: 20rpx;

				.gifts-content-y {
					width: 700rpx;
					height: 100%;

					.gift-list {
						width: 100%;
						flex-wrap: wrap;
						box-sizing: border-box;

						.gift-item {
							position: relative;
							width: 160rpx;
							height: 200rpx;
							margin-right: 20rpx;
							overflow: hidden;
							padding: 2rpx;

							&:nth-child(4n) {
								margin-right: 0rpx;
							}

							.gift-item-content {
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
								box-sizing: border-box;
							}

							.gift-img {
								margin-top: 10rpx;
								position: relative;
								width: 100rpx;
								height: 100rpx;

								.gift-num {
									position: absolute;
									right: 2rpx;
									bottom: 2rpx;
									padding: 4rpx 10rpx;
									font-size: 16rpx;
									line-height: 16rpx;
									color: rgba(0, 0, 0, .8);
									font-weight: 700;
									background-color: #f9d972;
									border-radius: 6rpx;
								}
							}

							.gift-name {
								width: 100%;
								font-size: 22rpx;
								line-height: 22rpx;
								text-align: center;
								color: #000;
								margin-top: 10rpx;
							}

							.gift-tip {
								width: 100%;
								font-size: 18rpx;
								line-height: 18rpx;
								text-align: center;
								color: #a5a2a2;
								margin-top: 10rpx;
							}

						}

						.active-gift-item {
							.gift-item-content {
								background-color: rgba(0, 0, 0, .05);

								.gift-tip {
									// color: #fff;
								}

								.gift-img {
									animation: scaleGfit 0.5s ease-in-out;
								}
							}
						}

						.empty-gift-item {
							opacity: 0;
						}


					}
				}

			}

			.bottom-btn-box {
				width: 100%;
				// height: 100rpx;
				flex: 1;
				box-sizing: border-box;
				padding: 0rpx 40rpx;
				font-weight: 24rpx;
				line-height: 24rpx;
				color: #fff;
				font-weight: 700;

				.left-tip {
					color: #000;

					.left-tip-icon {
						width: 25rpx;
						height: 25rpx;
						margin-left: 10rpx;
					}
				}

				.right-send {
					width: 180rpx;
					height: 55rpx;
					border-radius: 5rpx;
					background-color: #f9d972;
					color: #b27439;
					font-weight: 700;
					box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
				}
			}
		}

		.pkVideo {
			position: absolute;
			width: 100vw;
			height: 100vh;
			object-fit: cover;
			z-index: 1;
		}

	}

	@keyframes scaleGfit {
		0% {
			transform: scale(0.95);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}
</style>